<template>
  <div class="markdown-body" style="">
    <div class="box">
      <div v-html="getMdHtml(message[0].answer)" v-if="show"></div>
    </div>
  </div>
</template>

<script>
// import MarkdownIt from 'markdown-it';
// import hljs from "highlight.js";

import markdown from "@/utils/md"

export default {
  props: {
    markdown: String
  },
  computed: {
    // compiledMarkdown() {
    //   const md = new MarkdownIt();
    //   return md.render(this.markdown);
    // }
  },
  data(){
    return{
      show:false,
      message:[],
      messagesRequest:{
        appUuid:"94d06760301b43e0a3a2bd7de047d033",
        limit:100,
        conversation_id:"22cb0fd1-40be-4c53-8396-cc134045ce87"
      }
    }
  },
  mounted() {
    this.getMessage()
  },
  methods:{

    getMessage(){
      this.$api.chat.messages(this.messagesRequest).then(res => {
        this.message = res.result.data;
        this.show = true
      });
    },

    getMdHtml(info) {
      // const markdown = new MarkdownIt({
      //   highlight: function (str, lang) {
      //     console.log(lang)
      //     if (lang && hljs.getLanguage(lang)) {
      //       try {
      //         return '<pre class="hljs"><code>' +
      //             hljs.highlight(lang, str, true).value +
      //             '</code></pre>';
      //         // eslint-disable-next-line no-empty
      //       } catch (__) {}
      //     }
      //     return '<pre class="hljs"><code>' + markdown.utils.escapeHtml(str) + '</code></pre>';
      //   }
      // }).use(require('markdown-it-highlightjs'));
      var patt = /<details[\s\S]*details>/gm;
      var think = info.match(patt);
      // console.log(info);
      var thinkingHtml = "";
      var _html = "";
      if (think && think.length > 0) {
        // console.log(think[0]);
        thinkingHtml = think[0];
        var md = info.replace(thinkingHtml, "");
        _html = thinkingHtml + markdown.render(md);
      } else if (info.indexOf("details") >= 0) {
        _html = info;
      } else if (info==="ok-loading") {
        _html = `<i class="el-icon-loading"></i>`;
      }else {
        _html = markdown.render(info);
      }
      _html = _html.replace(/<hr>/g, "");
      _html = _html.replace("Thinking", "思考");
      return _html;
    }
  }
};
</script>

<style scoped>

/deep/ pre.hljs {
  background-color: #f4f4f4;
  padding: 10px;
}

/deep/ pre.hljs code {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 14px;
}

.markdown-body{
  width: 40%;
  margin: 50px auto;
}
.box{
  margin: 10px;
  background-color: white;
  border-radius: 10px;
  box-shadow: rgba(50, 50, 93, 0.25) 0 8px 10px -5px, rgba(0, 0, 0, 0.3) 0 1px 1px -8px;
  padding: 20px;
}
</style>
